<template>
  <div
    style="
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    "
  >
    {{ error ? error : '登录中...' }}
  </div>
</template>
<script setup>
import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useAccountStore } from '@/stores/account'
import { useRoute, useRouter } from 'vue-router'
import { jwtDecode } from 'jwt-decode'
/**
 * 入参
 */
let props = defineProps({
  redirect: {
    type: String,
    default: () => '/private/db-management/project/embed',
  },
})
/**
 * 获取token和分类信息
 */
let route = useRoute()
let router = useRouter()
let accountStore = useAccountStore()
let logging = ref(true)
let error = ref()
onMounted(() => {
  // if (!route.query.categoryName) {
  //   error.value = `分类名称是必须的参数!`
  //   return
  // }
  if (!route.query.token) {
    error.value = `令牌是必须的参数!`
    return
  }
  try {
    let token = decodeURIComponent(route.query.token || '').replace(
      /^Bearer\s/,
      '',
    )
    jwtDecode(token)
    accountStore.login(
      decodeURIComponent(route.query.token || '').replace(/^Bearer\s/, ''),
    )
    logging.value = false
    // console.log(props.redirect)
    let { token: t, ...otherQuery } = route.query
    let { redirect, ...otherProps } = props
    router.replace({
      path: props.redirect,
      query: { ...otherQuery, ...otherProps },
    })
  } catch (e) {
    error.value = `异常的令牌:<${e}>`
  }
})
</script>
<script>
export default {
  name: 'db-management-embed-auto-login',
}
</script>
<style scoped lang="less">
.db-management {
  height: 100%;
  display: flex;
  .dir {
    background: #ffffff;
    border-radius: 2px;
    margin-right: 12px;
    padding: 20px;
    min-width: 212px;
    box-sizing: border-box;
  }
  .detail {
    flex: 1;
    overflow: hidden;
  }
}
</style>
